<template>
  <div class="rate-list">
    <span v-for="(star, index) in stars" :key="index" @click="clickStart(index)">
      <slot :star="star"></slot>
    </span>
  </div>
</template>
<script>
export default {
  name: "RateList",
  data() {
    return {
      rating: 0
    };
  },
  methods: {
    clickStart(index) {
      this.rating = index + 1;
    }
  },
  computed: {
    stars() {
      return [1, 2, 3, 4, 5].map(value => this.rating < value);
    }
  }
};
</script>
<style lang="scss">
.rate-list {
  .el-icon-star-on {
    color: #ffc411;
  }
  .el-icon-star-off,
  .fa-heart-o {
    color: #909399;
  }
  .fa-heart {
    color: #f56c6c;
  }
}
</style>

